<template>
  <div class="page flex-col">
    <div class="group_1 flex-col">
      <img
        class="image-wrapper_1 flex-col"
        referrerpolicy="no-referrer"
        src="https://lanhu.oss-cn-beijing.aliyuncs.com/87767f5c11cbe92a8b725c3a659d2dec"
      />
      <van-form @submit="onSubmit">
        <div class="block_4 flex-col">
          <div class="text-wrapper_4 flex-col">
            <van-button class="text_5" round block type="primary" native-type="submit">
              扫码签到
            </van-button>
          </div>
        </div>
        <div class="group_7 flex-col">
          <span class="text_6">欢迎来到学生e助手</span>
          <span class="text_7">&nbsp;填写信息</span>
          <van-cell-group inset>
            <van-field
              v-model="result1"
              is-link
              readonly
              name="所在班级"
              label="所在班级"
              placeholder="--选择专业--"
              @click="showPicker1 = true"
              :rules="[{ required: true, message: '请填写专业' }]"
            />
            <van-popup v-model:show="showPicker1" position="bottom">
              <van-picker :columns="columns1" @confirm="onConfirm1" @cancel="showPicker1 = false" />
            </van-popup>
            <van-field
              v-model="username"
              name="学生姓名"
              label="学生姓名"
              placeholder="真实姓名"
              :rules="[{ required: true, message: '请填写姓名' }]"
            />
            <van-field
              v-model="result2"
              is-link
              readonly
              name="签到课程"
              label="签到课程"
              placeholder="--选择课程--"
              @click="showPicker2 = true"
              :rules="[{ required: true, message: '请填写课程' }]"
            />
            <van-popup v-model:show="showPicker2" position="bottom">
              <van-picker :columns="columns2" @confirm="onConfirm2" @cancel="showPicker2 = false" />
            </van-popup>
          </van-cell-group>
        </div>
      </van-form>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'

const username = ref('')
const onSubmit = (values) => {
  console.log('submit', values)
}

const result1 = ref('')
const showPicker1 = ref(false)
const columns1 = [
  { text: 'value1', value: 'value1' },
  { text: 'value2', value: 'value2' },
  { text: 'value3', value: 'value3' },
  { text: 'value4', value: 'value4' },
  { text: 'value5', value: 'value5' }
]

const onConfirm1 = ({ selectedOptions }) => {
  result1.value = selectedOptions[0]?.text
  showPicker1.value = false
}

const result2 = ref('')
const showPicker2 = ref(false)
const columns2 = [
  { text: 'value1', value: 'value1' },
  { text: 'value2', value: 'value2' },
  { text: 'value3', value: 'value3' },
  { text: 'value4', value: 'value4' },
  { text: 'value5', value: 'value5' }
]

const onConfirm2 = ({ selectedOptions }) => {
  result2.value = selectedOptions[0]?.text
  showPicker2.value = false
}
</script>
<style scoped src="@/static/signUp/common.css" />
<style scoped src="@/static/signUp/index.css" />
